<!-- 机构端-账号与设置 -->
<template>
  <view class="profile-container">
    <!-- 信息列表 -->
    <view class="info-list">
      <!-- 负责人姓名 -->
			<view class="info-item">
			  <text class="info-label">负责人姓名</text>
			  <u-input  v-model="profileInfo.name" placeholder="请输入负责人姓名" input-align="right" />
			</view>			

      
      <!-- 职务/岗位 -->
			<view class="info-item">
			  <text class="info-label">职务/岗位</text>
			  <u-input  v-model="profileInfo.position" placeholder="请输入职务/岗位" input-align="right" />
			</view>		
			

      
			<!-- 负责人手机号 -->
			<u-cell-item  title="负责人手机号" :value="profileInfo.phone"  hover-class="cell-hover-class" @click="changeIphone"></u-cell-item>
      
      <!-- 设置/修改密码 -->			
			<u-cell-item  title="设置/修改密码"  hover-class="cell-hover-class" @click="ChangePassword"></u-cell-item>
      
      <!-- 已绑定微信号 -->
			<u-cell-item  title="已绑定微信号" :value="profileInfo.wxNumber" hover-class="cell-hover-class" @click="wechatList"></u-cell-item>

      
     
			<!-- 按钮组 -->
			<view class="button-group">
				<u-button type="primary" @click="handleSubmit" shape="circle" :loading="loading" :custom-style="btuStyle">
					退出登录
				</u-button>
			</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
			btuStyle: {
				"backgroundColor": "#03B8CD",
				"color": "#ffffff"
			},
      avatarUrl: '/static/default-avatar.jpg', // 默认头像
      userName: 'XXX', // 用户名
      profileInfo: {
        name: 'XXX',
        position: 'XXX',
        phone: '156****6532',
				wxNumber: 2,
      }
    }
  },
	onShow() {
			// 获取企业信息
			this.getQyxx()	
	},
  methods: {
			// 获取企业信息
			getQyxx() {
				this.$u.api.queryjgqyxx({
					"usercode": uni.getStorageSync('usercode')
				}).then(res => {
					console.log('企业信息：', res)					
					let baseinfo = res.data.base_info.base
					this.profileInfo = {
					  name: baseinfo.user_name,
					  position: baseinfo.user_dev,
					  phone: this.maskPhoneNumber(baseinfo.user_phoneno),
						wxNumber: 2,
					}				
				})
			},
			// 将手机号中间转为星号
			maskPhoneNumber(phone) {
			  return String(phone).replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
			},

    // 跳转修改密码页面
    ChangePassword() {
      uni.navigateTo({
        url: '/pages/Institution/organSetting/changepassword'
      })
    },
		
		// 绑定的微信列表
		wechatList() {
			uni.navigateTo({
			  url: '/pages/Institution/organSetting/wechatList'
			})
		},
		
		// 修改手机号码
		changeIphone() {
			uni.navigateTo({
			  url: '/pages/Institution/organSetting/changeIphone'
			})
		},
		
		// 登录
		handleSubmit() {
			// 获取所有storage的key
			const res = uni.getStorageInfoSync();
			const keys = res.keys; // 所有存储的key数组
			
			// 遍历删除所有
			keys.forEach(key => {
			  uni.removeStorageSync(key);
			});
			uni.navigateTo({
			  url: '/pages/login/login'
			})
		},
		
    // 退出登录
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '正在退出...'
            })
            // 模拟退出请求
            setTimeout(() => {
              uni.hideLoading()
              uni.reLaunch({
                url: '/pages/login/login'
              })
            }, 1000)
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.profile-container {
  padding: 30rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 0;
  
  .user-name {
    margin-top: 20rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
}

.info-list {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 0 30rpx;
	color: #606266;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
  
  &.clickable:active {
    background-color: #f9f9f9;
  }
  
  .info-label {
    font-size: 28rpx;
    color: #666;
		margin-right: 20px;
  }
  
  .info-value {
    font-size: 28rpx;
    color: #333;
  }
  
  &:last-child {
    border-bottom: none;
		// padding: 13px 16px;
  }
}

// 使用穿透可能在微信小程序中不起作用， 可以加！important 进一步深度处理
/deep/ .u-cell {
	padding: 0 !important;
	height: 60px;
}

.logout-btn {
  padding: 30rpx 0;
  text-align: center;
  color: #f56c6c;
  font-size: 30rpx;
  font-weight: 500;
  
  &:active {
    opacity: 0.8;
  }
}

.button-group {
	// display: flex;
	// justify-content: space-between;
	margin: 30rpx;

	// 此样式主要为了适配wx小程序的按钮
	/deep/ .u-size-default {
		width: 300px; 
	}

	.u-btn {
		flex: 1;
	}
}
</style>